@import '../../../../styles-var/devui-var.scss';

$input-height-md: 28px;
$devui-table-inset-shadow-left: var(--devui-table-inset-shadow-left, 8px 0 8px -4px);
$devui-table-inset-shadow-right: var(--devui-table-inset-shadow-right, -8px 0 8px -4px);

.#{$devui-prefix}-table {
  &__tbody {
    tr {
      font-size: $devui-font-size;
      color: $devui-text;
      background-color: $devui-base-bg;
      border: none;

      &.hover-enabled:hover {
        background-color: $devui-list-item-hover-bg;

        .#{$devui-prefix}-table--last-sticky-left {
          background: linear-gradient(to left, transparent, $devui-list-item-hover-bg 10px);
        }

        .#{$devui-prefix}-table--first-sticky-right {
          background: linear-gradient(to right, transparent, $devui-list-item-hover-bg 10px);
        }
      }

      td .icon-expand-row:hover {
        cursor: pointer;
      }

      &.expanded td .icon-expand-row {
        transform: rotate(45deg);
      }

      td {
        background-clip: padding-box;
        background-color: inherit;
        vertical-align: middle;
        line-height: 24px;
        border: none;
        border-bottom: 1px solid $devui-dividing-line;

        &.is-left {
          text-align: left;
        }

        &.is-center {
          text-align: center;
        }

        &.is-right {
          text-align: right;
        }

        .editable-cell {
          position: relative;
          margin-left: -8px;
          padding-left: 8px;
          cursor: pointer;

          &:hover::after {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border: 1px solid $devui-line;
            border-radius: $devui-border-radius;
            pointer-events: none;
          }
        }

        .#{$devui-prefix}-table__cell {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          .cell-text {
            height: 32px;
            line-height: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .is-hidden {
      display: none;
    }
  }

  &__lazy__flag {
    width: 0;
    height: 0;
  }
}

.#{$devui-prefix}-table {
  &--sticky-cell {
    position: sticky;
    z-index: 5;
  }

  &--scroll-middle,
  &--scroll-right {
    .#{$devui-prefix}-table--last-sticky-left {
      background: linear-gradient(to left, transparent, $devui-base-bg 10px);

      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 10px;
        pointer-events: none;
        box-shadow: inset $devui-table-inset-shadow-left $devui-light-shadow;
      }
    }
  }

  &--scroll-middle,
  &--scroll-left {
    .#{$devui-prefix}-table--first-sticky-right {
      background: linear-gradient(to right, transparent, $devui-base-bg 10px);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 10px;
        pointer-events: none;
        box-shadow: inset $devui-table-inset-shadow-right $devui-light-shadow;
      }
    }
  }
}
